<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>购物车</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/carts.css" />
</head>

<body>
  <div id="app">
    <section class="cartMain">
      <div class="cartMain_hd">
        <ul class="order_lists cartTop">
          <li class="list_chk">
            <!--所有商品全选：一级-->
            <input type="checkbox" class="whole_check" v-model="allcheck"/>全选
          </li>
          <li class="list_con">商品信息</li>
          <li class="list_info">商品参数</li>
          <li class="list_price">单价</li>
          <li class="list_amount">数量</li>
          <li class="list_sum">金额</li>
          <li class="list_op">操作</li>
        </ul>
        
      </div>

      <div class="cartBox">
        <div class="shop_info" style="position: static; " v-for="(shop,index) in goodslist">
          <div class="shop_name">
            <div class="all_check">
              <!--店铺全选按钮:二级-->
              <input type="checkbox" class="shopChoice" v-model="shop.ischeck" @click="change(index)"/>
            </div>
            <!-- 店铺名 -->
            店铺：<a href="javascript:;">{{shop.title}}</a>
            <div class="order_content">
              <ul class="order_lists" v-for="(good,inx) in shop.goods">
                <li class="list_chk">
                  <!-- 商品的复选框：三级 -->
                  <input type="checkbox" class="son_check" v-model="good.ischecked"/>
                </li>
                <li class="list_con">
                  <!-- 商品图片 -->
                  <div class="list_img">
                    <a href="javascript:;"><img :src="good.img" alt="" /></a>
                  </div>
                  <!-- 商品标题 -->
                  <div class="list_text">
                    <a href="javascript:;">{{good.title}}</a>
                  </div>
                </li>
                <li class="list_info">
                  <!-- 商品规格 -->
                  <p>规格：{{good.size}}</p>
                  <p>尺寸：{{good.weight}}</p>
                </li>
                <li class="list_price">
                  <!-- 价格 -->
                  <p class="price">￥ 89</p>
                </li>
                <li class="list_amount">
                  <div class="amount_box">
                    <!-- 点击减去数量 -->
                    <!-- 如果不可点，可以添加 reSty样式名 -->
                    <a href="javascript:;" class="reduce reSty" @click="cut(index,inx)">-</a>
                    <!-- 数量 -->
                    <input type="text" v-model="good.num" class="sum" />
                    <!-- 点击加数量 -->
                    <!-- 如果不可点，可以添加 reSty样式名 -->
                    <a href="javascript:;" class="plus" @click="add(inx)">+</a>
                  </div>
                </li>
                <li class="list_sum">
                  <!-- 总价 -->
                  <p class="sum_price">￥ 89900</p>
                </li>
                <li class="list_op">
                  <!-- 删除商品 -->
                  <p class="del">
                    <a href="javascript:;" class="delBtn">移除商品</a>
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>

      <!--底部-->
      <div class="bar-wrapper">
        <div class="bar-right">
          <div class="piece">
            已选商品<strong class="piece_num">99</strong>件
          </div>
          <div class="totalMoney">
            共计: <strong class="total_text">8776</strong>
          </div>
          <div class="calBtn">
            <a href="javascript:;" class="btn_sty">结算</a>
          </div>
        </div>
      </div>
    </section>
    <!-- 模态框的显示和隐藏，隐藏就添加样式hide；显示就去掉hide -->
    <section class="model_bg hide"></section>
    <section class="my_model hide">
      <p class="title">删除宝贝<span class="closeModel">X</span></p>
      <p>您确认要删除该宝贝吗？</p>
      <div class="opBtn">
        <a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;" class="dialog-close">关闭</a>
      </div>
    </section>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/app.js"></script>

</html>